<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通讯录系统</title>
</head>
<body>
<p>这是第一个段落。</p>
<a href="https://www.runoob.com">点击跳转</a>

<form action="http://127.0.0.1:8089/login" method="get" id="login_from" style="text-align:center">
    <!-- 文本输入框 -->
    <label for="tele">用户名或电话号码:</label>
    <input type="text" id="tele" name="tele" required>

    <br>

    <!-- 密码输入框 -->
    <label for="passwd" style="text-align:center">密码:</label>
    <input type="password" id="passwd" name="passwd" required>

    <br>

    <!-- 单选按钮 -->


    <br>

    <!-- 复选框 -->


    <br>

    <!-- 下拉列表 -->


    <br>

    <!-- 提交按钮 -->
    <input type="submit" value="提交">
</form>

</body>
<script>







    document.getElementById('login_from').addEventListener('submit', function (event) {
        // 阻止默认的表单提交行为
        event.preventDefault();

        // 获取表单数据
        const formData = new FormData(event.target);

        const params = new URLSearchParams(formData).toString(); // ?userName=xxx&tele=1233
        console.log("提交的参数:" + params)

        // 使用 fetch 发送 GET 请求
        fetch(`/api/login?${params}`, { //http://127.0.0.1:9900/api/login?${params}
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                return response.json();
            })
            .then(result => {
                console.log('Success:', result);
                if (result.msg == "登录成果")
                {
                    document.cookie = `token=${encodeURIComponent(result.token)}; path=/`;

                    window.location.href = '/welcome.html';

                }
                else {
                    alert('登录失败 账户名或密码错误');
                }

            })
            .catch(error => {
                console.error('Error:', error);
                alert('An error occurred while fetching data.');
            });
    });
</script>
</html>


